<template>
	<view class="SavingType">
		<view class="SavingType_title">
			存钱类型
		</view>
		<view>
			<!-- <view v-for="sc in saveChoose" :key="sc.title" :style="{'background-image': 'url('+sc.path+')'}" class="SavingType_item">
				<text class="itel_title">365天存钱</text>
			</view> -->

			<swiper :indicator-dots="true" class="swiper">
				<swiper-item v-for="(item,index) in saveChoose" :key="index">
					<u-grid :border="true">
						<u-grid-item  @click="showTypeDetail(childrenItem)" :customStyle="{height:200+'rpx'}" v-for="(childrenItem, index) in item" :key="index">
							<text>{{childrenItem.saveName}}</text>
							<image :src='getImageUrl(childrenItem.bg_img)' :style="{'width': '100%'}" mode=""></image>
						</u-grid-item>
					</u-grid>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import {getSaveTypeAPI} from '@/api/api.js'
	export default {
		data() {
			return {
				saveChoose: [[],[]],
			}
		},
		methods: {
		  getImageUrl(src){
			  return require('@/static/'+src)
		  },
          async getSaveType(){
			  const res=await getSaveTypeAPI()
			  res.data.forEach((item,index)=>{
				if(index<=2){
					this.saveChoose[0].push(item)
				}else{
					this.saveChoose[1].push(item)
				}
			  })
		  },
		  showTypeDetail(item){
			  setTimeout(()=>{
				   this.$bus.$emit('getSaveTypeInfo',item)
			  },100)
			  uni.navigateTo({
			  	url:'/pages/showSaveDetail/showSaveDetail'
			  })
		  }
		},
		mounted() {
			this.getSaveType()
		}
	}
</script>

<style>
	.SavingType_title {
		color: white;
		font-size: 40rpx;
		font-weight: bolder;
		margin-bottom: 20rpx;

	}

	/* .SavingType_choose {
		display: flex;
		justify-content: space-between;
		flex-wrap: nowrap;
	} */

	/* 	.SavingType_item{
	width: 200rpx;
	height: 200rpx;
	color: white;
	font-weight: bold;
	background-color: rgba(178, 178, 178, 0.6);
	border-radius: 20rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-size: cover;
} */
	/* 	.SavingType_item>image {
		flex: 1;
		width: 100%;
		height: 100%;
	} */
	.swiper {
		height: 200rpx;
		border: 1px solid;
	}
</style>
